Number Variables in Figma are reusable numeric values that can be applied to different design properties such as spacing, padding, gap, width, height, corner radius, font size, line height, letter spacing, opacity, stroke weight, and other supported numeric properties. They are an important part of creating scalable, consistent, and maintainable design systems.
Number Variables are especially useful when the same numeric value is used repeatedly throughout a design. Instead of manually entering values such as 8px, 16px, 24px, or 32px in many different places, designers can create reusable variables and apply them wherever required.
For professional Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
A Number Variable is a reusable variable that stores a numeric value. The value can be a whole number or a decimal value supported by the relevant Figma property.
For example, instead of repeatedly entering 16 for padding, you can create a Number Variable called spacing/md with a value of 16.
Variable Name: spacing/md
Variable Type: Number
Value: 16
The same variable can then be applied to multiple frames, components, buttons, cards, and other supported properties.
Suppose a design system uses 16px as the standard medium spacing value.
spacing/sm = 8
spacing/md = 16
spacing/lg = 24
spacing/xl = 32
Instead of manually entering these values repeatedly, the designer can create Number Variables and reuse them throughout the design.
| Normal Number | Number Variable |
|---|---|
| Entered manually | Reusable value |
| Harder to update globally | Easier to maintain |
| Can become inconsistent | Promotes consistency |
| No semantic name | Can have meaningful names |
| Useful for one-off values | Useful for design systems |
| Limited reuse | Designed for reuse |
spacing/xs = 4
spacing/sm = 8
spacing/md = 16
spacing/lg = 24
spacing/xl = 32
radius/sm = 4
radius/md = 8
radius/lg = 16
size/icon-sm = 16
size/icon-md = 24
size/icon-lg = 32
Number Variables can be created from Figma's Variables view.
Figma currently allows up to 5,000 variables in a collection. :contentReference[oaicite:0]{index=0}
A Number Variable generally contains a name, type, value, and optional metadata such as description, scope, code syntax, and mode values.
| Property | Example |
|---|---|
| Name | spacing/md |
| Type | Number |
| Value | 16 |
| Description | Medium spacing token |
| Scope | Padding, Gap |
| Mode | Mobile / Desktop |
Good naming makes variables easier to understand and maintain.
spacing/xs
spacing/sm
spacing/md
spacing/lg
spacing/xl
radius/sm
radius/md
radius/lg
font-size/sm
font-size/md
font-size/lg
layout/gutter
layout/container
layout/sidebar
Use names that communicate the purpose of the value rather than only the number.
Spacing is one of the most common use cases for Number Variables.
spacing/2xs = 2
spacing/xs = 4
spacing/sm = 8
spacing/md = 16
spacing/lg = 24
spacing/xl = 32
spacing/2xl = 48
These variables can create a consistent spacing scale across an application.
Number Variables can be applied to supported padding properties in Auto Layout.
padding/sm = 8
padding/md = 16
padding/lg = 24
For example, a card can use padding/md instead of manually entering 16.
Auto Layout gaps can use Number Variables to maintain consistent spacing between child layers.
layout/gap-sm = 8
layout/gap-md = 16
layout/gap-lg = 24
This makes spacing between buttons, cards, navigation items, and content sections easier to manage.
Number Variables can be used for corner radius values.
radius/none = 0
radius/sm = 4
radius/md = 8
radius/lg = 16
radius/xl = 24
This helps create consistent rounded corners throughout a design system.
Number Variables can be used for supported width and height properties.
size/button-height = 44
size/input-height = 48
size/avatar-sm = 32
size/avatar-md = 48
size/avatar-lg = 64
This is useful for reusable components and standardized UI dimensions.
Number Variables can also be used for supported minimum and maximum width or height properties.
container/min-width = 320
container/max-width = 1200
Using semantic variables helps designers understand why a specific dimension exists.
Number Variables can be applied to supported font properties, including font size.
font-size/xs = 12
font-size/sm = 14
font-size/md = 16
font-size/lg = 20
font-size/xl = 24
font-size/2xl = 32
This creates a reusable typography scale.
Number Variables can represent numeric font weights such as 400 or 700 when supported by the font and property.
font-weight/regular = 400
font-weight/medium = 500
font-weight/semibold = 600
font-weight/bold = 700
Figma lists font weight as one of the font properties that Number Variables can support. :contentReference[oaicite:1]{index=1}
Number Variables can be useful for maintaining consistent line-height values.
line-height/sm = 18
line-height/md = 24
line-height/lg = 32
Using predefined values reduces inconsistent text spacing across a design system.
Number Variables can be applied to supported letter-spacing properties. Figma interprets letter spacing values as pixels rather than percentages for Number Variables. :contentReference[oaicite:2]{index=2}
letter-spacing/tight = -0.2
letter-spacing/normal = 0
letter-spacing/wide = 0.5
Number Variables can be used for paragraph spacing and paragraph indentation where supported.
paragraph/spacing-sm = 8
paragraph/spacing-md = 16
paragraph/spacing-lg = 24
Number Variables can help standardize border and stroke thickness.
stroke/thin = 1
stroke/medium = 2
stroke/thick = 3
This is especially useful for design systems that use consistent borders on cards, inputs, buttons, and other components.
Number Variables can be used with supported opacity properties.
opacity/disabled = 40
opacity/secondary = 60
opacity/normal = 100
For opacity-related properties, Figma constrains values outside the supported range: values above 100 default to 100 and negative values default to 0. :contentReference[oaicite:3]{index=3}
Number Variables can be used with supported effect values such as shadow offsets, blur, and spread.
shadow/x = 0
shadow/y = 4
shadow/blur = 12
shadow/spread = 0
This allows a design system to standardize elevation and shadow values.
Number Variables can support layout-guide properties such as grid size and supported row or column counts.
grid/size = 8
grid/columns = 12
grid/gutter = 24
Whole numbers are required for properties such as row and column counts.
Number Variables are particularly useful for responsive designs because different modes can store different numeric values for different contexts.
Mobile:
spacing/page = 16
Desktop:
spacing/page = 32
With modes, the same variable can represent different values without manually changing every layer.
A variable mode allows one collection to contain different values for different contexts. Number Variables can therefore support mobile, tablet, desktop, compact, comfortable, or other design contexts.
| Variable | Mobile | Desktop |
|---|---|---|
| spacing/page | 16 | 32 |
| layout/gap | 12 | 24 |
| font-size/title | 24 | 32 |
Figma describes variable modes as different contextual values stored for variables in a collection. :contentReference[oaicite:4]{index=4}
A common design-system pattern is to use different values for mobile and desktop layouts.
Variable: spacing/container
Mobile = 16
Desktop = 32
The design can then switch modes instead of manually updating every container.
Number Variables can act as design tokens for values such as spacing, sizing, radius, typography, grids, and elevation.
Spacing Tokens
spacing/xs = 4
spacing/sm = 8
spacing/md = 16
spacing/lg = 24
Radius Tokens
radius/sm = 4
radius/md = 8
radius/lg = 16
Size Tokens
size/sm = 24
size/md = 32
size/lg = 48
Variables are organized inside collections. A collection can contain related variables and multiple modes.
Collection: Design Tokens
spacing/xs
spacing/sm
spacing/md
spacing/lg
radius/sm
radius/md
radius/lg
font-size/sm
font-size/md
font-size/lg
Organizing variables into logical collections makes large design systems easier to maintain.
Groups can be used to organize variables within a collection.
Spacing
xs
sm
md
lg
xl
Radius
sm
md
lg
Typography
sm
md
lg
Figma supports slash-based naming to organize variables into groups. :contentReference[oaicite:5]{index=5}
Scoping limits where a variable can be used. This helps prevent inappropriate variables from appearing for unrelated properties.
For Number Variables, Figma supports scopes including Auto Layout gap and padding, corner radius, font properties, layer opacity, effects, stroke, text content, and width and height. :contentReference[oaicite:6]{index=6}
Variable:
radius/md = 8
Scope:
Corner Radius
When a variable is scoped to a specific property, it becomes easier for designers to select the correct token.
Number Variables can be applied to supported numeric properties through the relevant property field and variable picker.
Figma's current documentation describes several property-specific ways to apply Number Variables, including using the variable picker or the Apply variable option. :contentReference[oaicite:7]{index=7}
Variable:
spacing/md = 16
Frame Padding:
Top = spacing/md
Right = spacing/md
Bottom = spacing/md
Left = spacing/md
This creates equal and reusable padding around the frame.
Variable:
spacing/sm = 8
Auto Layout Gap:
8px → spacing/sm
If the design system later changes the small spacing token, connected layouts can update accordingly.
Variable:
radius/md = 8
Button Radius:
8px → radius/md
This allows multiple buttons and components to share the same radius token.
Variable:
font-size/md = 16
Body Text:
16px → font-size/md
This makes typography values reusable and easier to maintain.
Number Variables are highly useful with reusable components. A button, card, input, navigation item, or modal can use variables for dimensions, spacing, radius, typography, and other numeric properties.
Button
├── Height → size/button-height
├── Padding → spacing/md
├── Gap → spacing/sm
├── Radius → radius/md
└── Font Size → font-size/md
button/height = 44
button/padding = 16
button/gap = 8
button/radius = 8
button/icon-size = 20
Using variables ensures that all buttons follow the same design rules.
input/height = 48
input/padding = 12
input/radius = 8
input/icon-size = 20
These variables can be reused for search fields, login forms, registration forms, checkout forms, and settings screens.
card/padding = 24
card/gap = 16
card/radius = 12
card/image-height = 200
This creates consistent card layouts across an application.
navigation/item-height = 44
navigation/gap = 8
navigation/icon-size = 20
navigation/padding = 16
Navigation components can use these variables to maintain consistent spacing and sizing.
Number Variables can standardize product cards, pricing sections, filters, carts, checkout forms, and responsive layouts.
product/card-radius = 12
product/image-height = 240
product/content-gap = 12
cart/item-gap = 16
checkout/section-gap = 32
dashboard/sidebar-width = 240
dashboard/card-gap = 24
dashboard/card-radius = 12
dashboard/page-padding = 32
dashboard/header-height = 64
This is useful for admin dashboards, analytics platforms, SaaS products, and enterprise applications.
mobile/page-padding = 16
mobile/header-height = 56
mobile/button-height = 48
mobile/card-gap = 16
mobile/icon-size = 24
A mobile design system can use these tokens across multiple screens.
Number Variables can be used in advanced prototypes to store and modify numeric values. Figma supports using variables with prototype actions and expressions for dynamic interactions and calculations. :contentReference[oaicite:8]{index=8}
For example, a shopping cart prototype can use number variables for quantities and totals.
quantity = 2
price = 500
subtotal = quantity * price
Number Variables become particularly powerful when used with expressions in prototypes.
price = 500
quantity = 3
total = price * quantity
This approach can be useful for prototypes that demonstrate pricing, quantity selection, counters, scores, calculations, or progress values.
productPrice = 499
quantity = 2
shipping = 50
subtotal = productPrice * quantity
total = subtotal + shipping
A prototype can update numeric variables based on user interactions.
Number Variables can represent values such as quantity, likes, scores, steps, progress, or notification counts.
quantity = 1
likes = 120
notifications = 5
progress = 70
progress = 75A progress-related variable can be connected to supported numeric properties to demonstrate changing progress in a prototype.
Number Variables can also participate in component variant workflows when the variable values match the relevant variant property values. Figma documents number variables as supported for mapping to variant instances. :contentReference[oaicite:9]{index=9}
Variable:
button/size = 44
Variants:
44
48
56
When configured appropriately, the variable can help switch a component to the corresponding variant.
Variables can reference other variable definitions when supported. This can help build a structured token hierarchy.
Primitive:
spacing/16 = 16
Semantic:
component/button/padding = spacing/16
This approach separates raw values from semantic design decisions.
Primitive variables represent foundational numeric values.
spacing/4 = 4
spacing/8 = 8
spacing/16 = 16
spacing/24 = 24
spacing/32 = 32
These values can become the foundation of a larger token system.
Semantic variables describe how a value is used rather than only describing the raw number.
button/padding = spacing/16
card/padding = spacing/24
page/gutter = spacing/32
Semantic naming improves communication between designers and developers.
Number Variables can form an important part of a design system by providing reusable tokens for spacing, dimensions, typography, radius, grids, borders, effects, and responsive behavior.
Design System
├── Spacing
├── Sizing
├── Radius
├── Typography
├── Layout
├── Grid
├── Stroke
└── Effects
Number Variables can improve developer handoff because developers can inspect variable information and understand how a value is represented in the design system. Figma's Dev Mode can show variable details including the variable name, collection, mode, value, scope, and code information where available. :contentReference[oaicite:10]{index=10}
Designers can also add code syntax to variables to represent them appropriately in supported code environments.
Code syntax helps developers understand how a Figma variable should be represented in code.
Figma Variable:
spacing/md
Web:
var(--spacing-md)
Figma supports code syntax entries for Web, Android, and iOS for variables. :contentReference[oaicite:11]{index=11}
When developers inspect a design in Dev Mode, they may encounter Number Variables applied to properties. Variable details can provide information about the variable's name, collection, mode, value, scope, and code representation. :contentReference[oaicite:12]{index=12}
Collection: Responsive Tokens
Mobile:
page-padding = 16
section-gap = 24
Desktop:
page-padding = 32
section-gap = 48
This makes it possible to use the same semantic variables while changing their numeric values between modes.
Mobile:
heading-size = 24
body-size = 16
Desktop:
heading-size = 32
body-size = 18
This approach can help designers preview how typography scales between contexts.
| Category | Example Variable | Value |
|---|---|---|
| Spacing | spacing/md | 16 |
| Radius | radius/md | 8 |
| Font Size | font-size/md | 16 |
| Line Height | line-height/md | 24 |
| Button Height | button/height | 44 |
| Stroke | stroke/thin | 1 |
| Grid | grid/gutter | 24 |
| Number Variable | String Variable |
|---|---|
| Stores numeric values | Stores text values |
| Example: 16 | Example: "Hello" |
| Useful for spacing and dimensions | Useful for text and labels |
| Useful for numeric calculations | Useful for localized text |
| Number | Boolean |
|---|---|
| Stores numbers | Stores true/false |
| Example: 24 | Example: true |
| Used for dimensions | Used for states and visibility |
| Supports numeric expressions | Supports logical conditions |
Styles and variables solve related but different design-system problems. Number Variables are useful when you need reusable numeric values, modes, scoping, token relationships, or dynamic prototype behavior.
| Number Variable | Style |
|---|---|
| Stores reusable numeric value | Stores a collection of style properties |
| Supports modes | Does not work in the same variable-mode model |
| Can be scoped | Uses style applicability |
| Useful for design tokens | Useful for reusable styles |
Create a complete spacing system for a web application.
spacing/2xs = 2
spacing/xs = 4
spacing/sm = 8
spacing/md = 16
spacing/lg = 24
spacing/xl = 32
spacing/2xl = 48
spacing/3xl = 64
Apply these variables to cards, buttons, sections, forms, navigation, and page layouts.
Create Mobile and Desktop modes for a dashboard.
| Variable | Mobile | Desktop |
|---|---|---|
| page/padding | 16 | 32 |
| card/gap | 12 | 24 |
| section/gap | 24 | 48 |
| title/size | 24 | 32 |
button/height = 44
button/padding = 16
button/gap = 8
button/radius = 8
button/icon-size = 20
button/font-size = 14
Build primary, secondary, outline, and disabled button variants using a consistent numeric token system.
product/card-padding = 16
product/card-radius = 12
product/image-height = 220
product/content-gap = 12
product/button-height = 44
Apply these variables to product cards and create responsive modes for smaller and larger layouts.
Mobile:
heading-xl = 28
heading-lg = 24
body = 16
Desktop:
heading-xl = 40
heading-lg = 32
body = 18
Use modes to switch typography values between mobile and desktop contexts.
A practical workflow for Number Variables is:
Identify Repeated Numeric Values
↓
Define Design Tokens
↓
Create Variable Collection
↓
Create Number Variables
↓
Organize Variables into Groups
↓
Add Descriptions
↓
Configure Scope
↓
Create Modes
↓
Apply Variables
↓
Build Components
↓
Test Responsive Designs
↓
Inspect in Dev Mode
↓
Publish and Maintain
number1 or value2.Category / Purpose / Size
spacing / page / md
spacing / section / lg
radius / card / md
size / button / md
font-size / heading / lg
layout / sidebar / width
The exact naming convention can vary between teams, but consistency is more important than the specific convention chosen.
| Property | Example |
|---|---|
| Spacing | 16 |
| Padding | 16 |
| Gap | 8 |
| Radius | 8 |
| Width | 320 |
| Height | 48 |
| Font Size | 16 |
| Font Weight | 400 |
| Line Height | 24 |
| Letter Spacing | 0 |
| Opacity | 60 |
| Stroke Weight | 1 |
| Shadow Blur | 12 |
| Grid Size | 8 |
A Number Variable stores a reusable numeric value that can be applied to supported design properties.
They improve consistency, reusability, scalability, responsive design, and design-system maintenance.
They can be used for supported properties such as spacing, padding, gap, dimensions, corner radius, typography, opacity, effects, stroke, grids, and text content.
Yes. Variable modes can store different numeric values for different design contexts.
Scope limits where a variable can be applied, helping designers choose appropriate variables for specific properties.
Yes. Number Variables can be used in prototype interactions and expressions for numeric states and calculations.
Yes. Different modes can contain different numeric values for contexts such as mobile and desktop.
A normal number is manually entered, while a Number Variable is a reusable and maintainable named value.
Semantic names explain the purpose of a value and make the design system easier to understand.
They provide a structured representation of reusable numeric design tokens that developers can inspect and map to code.
Number Variables are an essential feature for creating scalable and maintainable Figma design systems. Instead of repeatedly entering numeric values such as spacing, padding, dimensions, radius, font sizes, and gaps, designers can create reusable variables and apply them consistently across components and screens.
When Number Variables are combined with collections, groups, modes, scope, components, Auto Layout, responsive design, prototypes, and Dev Mode, they provide a powerful foundation for modern design-token workflows. Learning how to create, organize, apply, and maintain Number Variables is an important step toward building professional and scalable Figma projects.
To learn Figma professionally, visit JustAcademy Figma Training or Register for Figma Course Demo.
